<template>
	<!-- 字体选择 -->
	<view v-if="show" class="pattern-popup" :class="{'ios': DEVICEINFO.platform=='ios'}">
		<view @click="closeModal" class="popup-shadow"></view>
		<view class="popup-content">
			<view @click="itemClick('1')" class="item" :class="{'on': exercisePattern===1}">
				<view class="type-text">练</view>
				<view class="text">练习模式</view>
			</view>
			<view @click="itemClick('2')" class="item" :class="{'on': exercisePattern===2}">
				<view class="type-text">快</view>
				<view class="text">快速模式</view>
			</view>
			<view @click="itemClick('5')" class="item" :class="{'on': exercisePattern===4}">
				<view class="type-text">快</view>
				<view class="text">快考模式</view>
			</view>
			<view @click="itemClick('3')" class="item">
				<view class="iconfont icon-zitifangda"></view>
				<view class="text">字体增大</view>
			</view>
			<view @click="itemClick('4')" class="item">
				<view class="iconfont icon-zitisuoxiao"></view>
				<view class="text">字体减小</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"patternPopup",
		props: {
			
		},
		watch: {
			
		},
		data() {
			return {
				show: false
			};
		},
		computed: {
			exercisePattern() {
				return this.$store.state.exercisePattern;
			},
			DEVICEINFO() {
				return this.$store.state.DEVICEINFO;
			},
		},
		created(){
		},
		mounted(){
			
		},
		methods: {
			openModal() {
			    this.show = true;
			},
			closeModal() {
			    this.show = false;
			    this.$emit('close'); // 触发关闭事件
			},
			itemClick(type) {
			    this.$emit('pattern',type); // 触发关闭事件
			},
		},
		beforeDestroy(){
			
		}
	}
</script>

<style lang="scss" scoped>
	.pattern-popup{
		position: fixed;
		z-index: 111;
		&.ios{
			top: 110rpx;
		}
	}
	.pattern-popup,.popup-shadow{
		top: 92rpx;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.popup-shadow{
		background-color: rgba(0, 0, 0, 0.4); /* 黑色半透明 */
		backdrop-filter: blur(4px); /* 背景模糊 4px */
	}
	.popup-shadow,.popup-content{
		position: absolute;
	}
	.popup-content{
		display: flex;
		justify-content: space-between;
		top: 123rpx;
		left: 0;
		right: 0;
		padding: 30rpx 40rpx 44rpx;
		text-align: center;
		background-color: #fff;
		color: #444;
		.item{
			flex: 1;
			&:last-child{
				margin-right: 0;
			}
			&.on{
				color: #ffe8ca;
			}
		}
		.type-text{
			font-size: 44rpx;
		}
		.text{
			font-size: 22rpx;
		}
		.iconfont{
			font-size: 56rpx;
		}
	}
</style>